@extends('mobile.layout')
@php
    $freight_where = \App\Services\ConfigService::get('freight_where',0);
    $freight = \App\Services\ConfigService::get('freight',0);

    $delivery_type_all = \App\Services\ConfigService::get('delivery_type',[]);
    if($delivery_type_all){
        $delivery_type_all = json_decode(\App\Services\ConfigService::get('delivery_type',[]),true);
    }
@endphp
@section('style')
    @parent
    <link rel="stylesheet" type="text/css" href="{{ asset('static/mobile/css/shopping.css') }}?v={{ app('cache.config')->get('asset_version') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('static/mobile/vant/index.css') }}?v={{ app('cache.config')->get('asset_version') }}"/>
    <style>
        .van-popup,.van-picker{
            overflow: hidden;
        }
        body {
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }



    </style>
@stop
@section('header')
    <header class="header">
        <a href="javascript:window.history.back();">
            <div class="go-back">
                <div>< 繼續購物</div>
            </div>
        </a>
        <p class="kus">快速結帳</p>
    </header>
    <div class="fuqi" style="height: 1rem;width: 100%"></div>
@stop
@section('footer-menu')
@stop
@section('footer')
@stop
@section('script')
    @parent
    <script src="{{ asset('static/mobile/js/relx.js') }}?v={{ app('cache.config')->get('asset_version') }}"></script>
    <script src="{{ asset('static/mobile/js/api.js') }}?v={{ app('cache.config')->get('asset_version') }}"></script>
    <script src="{{ asset('static/mobile/js/xarea.js') }}?v={{ app('cache.config')->get('asset_version') }}"></script>
    <script src="{{ asset('static/mobile/js/vue.min.js') }}"></script>
    <script src="{{ asset('static/mobile/js/axios.min.js') }}"></script>
    <script src="{{ asset('static/mobile/vant/vant.min.js') }}"></script>
    <script>


        new Vue({
            el: '#vue-app',
            data: {
                show: false,
                productEdit: false,
                isLoading: false,
                isCityLoading:false,
                isCountyLoading:false,
                isStreetLoading:false,
                address: '',
                dateColumns: ['09:00~12:00', '12:00~17:00', '17:00~20:00'],
                showDate:false, //时间
                showCity:false,
                showCounty:false,
                showStreet:false,
                cityColumns:[],
                countyColumns:[],
                streetColumns:[],
                addressList: [
                    {
                        values: [],
                        defaultIndex: 0,
                    },
                    {
                        values: [],
                        defaultIndex: 0,
                    },
                    {
                        values: [],
                        defaultIndex: 0,
                    },
                ],
            },
            methods: {
                switchOrderType(e){
                    this.getCityRender($(e.currentTarget).attr('data-id'));
                },
                toShowDateSelect(){
                    this.showDate = true;
                },

                toShowCitySelect(){
                    var _this = this;
                    _this.showCity = true
                },
                onShowCityConfirm:function(value,index){
                    $('input[name="city"]').val(value)
                    this.initialSelectStatus(2);
                    this.initialSelectStatus(3);
                    this.initialSelectStatus(4);
                    this.showCity = false;
                    this.getCountyRender();
                },
                onShowCityCancel(){
                    this.showCity = false;
                },

                toShowCountySelect(){
                    var _this = this;
                    var city_name = $('input[name="city"]').val();
                    if(!city_name){
                        $('input[name="county"]').blur();
                        layerMsg("請先選擇縣市");return false;
                    }
                    _this.showCounty = true;
                },
                onShowCountyConfirm:function(value,index){
                    $('input[name="county"]').val(value)
                    this.initialSelectStatus(3);
                    this.initialSelectStatus(4);
                    this.showCounty = false;
                    this.getRoadRender();
                },
                onShowCountyCancel(){
                    this.showCounty = false;
                },

                toShowStreetSelect(){
                    var _this = this;
                    var city_name = $('input[name="city"]').val();
                    if(!city_name){
                        $('input[name="street"]').blur();
                        layerMsg("請先選擇縣市");return false;
                    }
                    var county_name = $('input[name="county"]').val();
                    if(!county_name){
                        $('input[name="street"]').blur();
                        layerMsg("請選擇地區");return false;
                    }
                    _this.showStreet = true
                },
                onShowStreetConfirm:function(value,index){
                    $('input[name="street"]').val(value)
                    this.showStreet = false;
                    var order_type = $('input[name="order_type"]:checked').val();
                    if(order_type != 0){
                        var city_name = $('input[name="city"]').val();
                        var county_name = $('input[name="county"]').val();
                        this.getShop(order_type,city_name,county_name,value);
                    }

                },
                onShowStreetCancel(){
                    this.showStreet = false;
                },
                getShop(type,city_name,county_name,road_name){
                    $('#store-row-main').show();
                    var load = '<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto block store-load" style="width:50px;height:11px;opacity: 0.55;position: absolute;top: 50%;transform: translate(-50%,-50%);left: 50%;" viewBox="0 0 120 30" fill="currentColor"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle></svg>'
                    $('.show-store-shop').empty();
                    $('#casual').hide();
                    $('.store-balance').css('height','auto')
                    $('.show-store-shop').append(load);

                    var _this = this;
                    $.ajax({
                        type : "GET",  //提交方式
                        url : "/area/shop",//路径
                        dataType:'json',
                        data : {
                            "type":type,
                            "city_name" : city_name,
                            "county_name":county_name,
                            "road_name":road_name,
                        },
                        success : function(result) {//返回数据根据结果进行相应的处理
                            if(_this.isJSON(result)){
                                result = JSON.parse(result);
                            }
                            $('.store-load').remove();
                            _this.renderingStoreShop(result);

                        }
                    });
                },
                renderingStoreShop(data){
                    var template = $('#store-template').html();
                    var city = $('input[name="city"]').val();
                    var county = $('input[name="county"]').val();
                    var road = $('input[name="street"]').val();



                    var html = '';
                    for (var i=0;i<data.length;i++){
                        var shop_address = data[i]['shop_address'];
                        var new_address = shop_address.replace(city, '');
                        new_address = new_address.replace(county, '')
                        var road_length = road.length;
                        if(new_address && new_address.slice(0,road_length) == road){
                            new_address = new_address.replace(road, '')
                        }

                        html += template.replace(/\{store_id}/g, data[i]['shop_no']);
                        html = html.replace(/\{store_name}/g, data[i]['shop_name']);
                        html = html.replace(/\{store_city}/g, city+county);
                        html = html.replace(/\{store_road}/g, road);
                        html = html.replace(/\{store_address}/g, new_address);
                        if(data[i]['shop_type'] == 1){
                            html = html.replace(/\{store_icon}/g, '/static/img/family.jpg');
                        }else if(data[i]['shop_type'] == 2){
                            html = html.replace(/\{store_icon}/g, '/static/img/ok.jpg');
                        }else if(data[i]['shop_type'] == 3){
                            html = html.replace(/\{store_icon}/g, '/static/img/hilife.jpg');
                        }else{
                            html = html.replace(/\{store_icon}/g, '/static/img/711.jpg');
                        }
                    }
                    $('.show-store-shop').html(html);

                    if(data.length == 1){
                        $('.show-store-shop input').attr("checked",true);
                        $('.show-store-shop .store-box').css('border','0.02rem solid #262626');
                        $('.show-store-shop .store-box').attr("data-not-show",1);
                    }

                    $('#main-store-shop').hide();

                },
                isJSON(str) {
                    if (typeof str == 'string') {
                        try {
                            JSON.parse(str);
                            return true;
                        } catch(e) {
                            return false;
                        }
                    }
                },
                initialSelectStatus(type){
                    if(type == 0 || type==1){
                        $('input[name="city"]').val('');
                    }

                    if(type == 0 || type==2){
                        $('input[name="county"]').val('');
                    }

                    if(type == 0 || type==3){
                        $('input[name="street"]').val('');
                    }

                    if(type == 0 || type==4){
                        //$('#store-row-main').hide();
                        $('.show-store-shop').empty();
                        $('#casual').hide();
                        $('.store-balance').css('height','auto');
                    }

                },

                onShowDateConfirm(value, index){
                    $("input[name='show_date']").val(value);
                    $("input[name='delivery_time']").val(index+1);
                    this.showDate = false;
                },
                onShowDateCancel(){
                    this.showDate = false;
                },
                showAddress: function () {
                    this.show = true
                    document.activeElement.blur();
                },
                close: function () {
                    this.show = false
                },
                confirm: function(address) {
                    this.address = address[0]+'/'+ address[1] +'/'+ address[2]
                    this.show = false;
                },
                onChange: function(picker, index, value) {
                    if (value === 0) {
                        this.isLoading = true
                        this.setAddressData(1, index[0], this.addressList[1].values[2])
                    }

                    if (value === 1) {
                        this.isLoading = true
                        this.setSectionData(2, index[1], index[0])
                    }
                },
                setAddressData: function(index, name, preName = '') {
                    let _this = this
                    axios.get('/area', {
                        params: {
                            name,
                            type: index,
                        }
                    })
                        .then(function(res) {
                            _this.addressList[index].values = res.data

                            if ((preName !== '') && (res.data[0] !== preName) ) {
                                _this.setSectionData(2, res.data[0], name)
                            }

                            _this.isLoading = false
                        })


                },
                setSectionData: function(index, name, cityName = '') {
                    let _this = this
                    axios.get('/area', {
                        params: {
                            name: name,
                            type: index,
                            section: cityName,
                        }
                    })
                        .then(function(res) {
                            _this.addressList[index].values = res.data
                            _this.isLoading = false
                        })
                },
                editProduct: function () {
                    this.productEdit = true
                },
                editHide: function () {
                    this.productEdit = false
                },
                getCityRender:function(order_type){
                    if(!order_type){
                        order_type = $('input[name="order_type"]:checked').val();
                    }

                    var _this = this;
                    _this.cityColumns = [];
                    _this.isCityLoading = true;
                    $.ajax({
                        type : "GET",  //提交方式
                        url : "/area/city",//路径
                        data : {
                            "type":order_type,
                        },
                        dataType:'json',
                        success : function(result) {
                            _this.isCityLoading = false;
                            if(_this.isJSON(result)){
                                result = JSON.parse(result);
                            }
                            var cityColumns  = [];
                            for (var i=0;i<result.length;i++){
                                cityColumns[i] = result[i]['name'];
                            }
                            _this.cityColumns = cityColumns;

                        }
                    });


                },
                getCountyRender(){
                    var order_type = $('input[name="order_type"]:checked').val();
                    var city_name = $('input[name="city"]').val();
                    if(!city_name){
                        $('input[name="county"]').blur();
                        layer_msg("請先選擇縣市");return false;
                    }

                    var _this = this;
                    _this.countyColumns = [];
                    _this.isCountyLoading = true;
                    $.ajax({
                        type : "GET",  //提交方式
                        url : "/area/county",//路径
                        data : {
                            "type":order_type,
                            "city_name" : city_name
                        },
                        dataType:'json',
                        success : function(result) {
                            _this.isCountyLoading = false;
                            if(_this.isJSON(result)){
                                result = JSON.parse(result);
                            }
                            var cityColumns  = [];
                            for (var i=0;i<result.length;i++){
                                cityColumns[i] = result[i]['name'];
                            }
                            _this.countyColumns = cityColumns;

                        }
                    });
                },
                getRoadRender(){
                    var order_type = $('input[name="order_type"]:checked').val();
                    var city_name = $('input[name="city"]').val();
                    if(!city_name){
                        $('input[name="street"]').blur();
                        layer_msg("請先選擇縣市");return false;
                    }
                    var county_name = $('input[name="county"]').val();
                    if(!county_name){
                        $('input[name="street"]').blur();
                        layer_msg("請選擇地區");return false;
                    }
                    var _this = this;
                    _this.streetColumns = [];
                    _this.isStreetLoading = true
                    $.ajax({
                        type : "GET",  //提交方式
                        url : "/area/road",//路径
                        data : {
                            "type":order_type,
                            "city_name" : city_name,
                            "county_name":county_name,
                        },
                        dataType:'json',
                        success : function(result) {
                            _this.isStreetLoading = false;
                            if(_this.isJSON(result)){
                                result = JSON.parse(result);
                            }
                            var Columns  = [];
                            for (var i=0;i<result.length;i++){
                                Columns[i] = result[i]['name'];
                            }
                            _this.streetColumns = Columns;
                            $('.van-picker__loading').remove()
                        }
                    });
                }
            },
            mounted: function() {
                let _this = this
                $("input[name='order_type']").eq(0).trigger('click');
                _this.getCityRender();
            }
        });


    </script>
    <script>

        $('body').on('focus','input,textarea',function(){
            $(this).attr('x-placeholder',$(this).attr('placeholder'));
            $(this).attr('placeholder','')
        });

        $('body').on('blur','input,textarea',function(){
            $(this).attr('placeholder',$(this).attr('x-placeholder'));
            $(this).removeAttr('x-placeholder','')
        });

        $('body').on('click','.cart-action-remove2',function(){

            var callback = $(this).attr('data-action-callback');
            var cart_obj = $(this).parents('#cart-box');
            var length = $('.cart-action-remove2').length;
            if(length<=1){
                $('.product').find('.item').css('padding-bottom','0.6rem');
                $('.product').find('.item').append('<p class="last-tips"><i class="iconfont">&#xe631;</i><span>已經是最後一個商品了</span></p>');

                setTimeout(function(){
                    $('.last-tips').fadeOut(300,function(){
                        $(this).remove();
                        $('.product').find('.item').animate({'padding-bottom':"0.4rem"});
                    });
                }, 1000);
                return false;
            }
            $(this).remove();

            cart_obj.fadeTo(300, 0.01, function(){
                $(this).slideUp("slow", function() {
                    $(this).remove();
                    if(callback){
                        eval(callback)
                    }
                    var length = $('.cart-action-remove2').length;

                    if(length<=0){
                        var tmp = '<div class="not-cart"><p>購物袋空空如也</p><p>快去加入商品吧</p></div>';
                        $('.cart-body').html(tmp);
                    }
                });
            });

            deleteCart($(this).attr('data-id'));

        });

        $('body').on('click','.store-label',function(){
            if($(this).find('.store-box').attr('data-not-show')){
                return false;
            }

            var height = $('#casual').height()+16;
            var _this = $(this);
            $('.store-balance').animate({height:height},'300',function(){
                $('#casual').find('.store-name').text(_this.find('.store-name').text());
                $('#casual').find('.store-city').text(_this.find('.store-city').text());
                $('#casual').find('.store-road').text(_this.find('.store-road').text());
                $('#casual').find('.store-address').text(_this.find('.store-address').text());
                $('#casual').find('.store-icon img').attr('src',_this.find('.store-icon img').attr('src'));
                $('#casual').show();


            });
        });

        $('.store-more a').click(function(){
            $('#casual').hide();
            var height = $('.show-store-shop').height()+16
            $('.temp_store_radio').click();
            $('.store-balance').animate({height:height+'px'},'300',function(){

            });
        });





    </script>

    <script type="text/html" id="store-template">
        <div class="store-item">
            <input type="radio" id="store-{store_id}" name="store_id" onclick="$('#label-store-{store_id}').click()" value="{store_id}">
            <label class="store-label" id="label-store-{store_id}" for="store-{store_id}">
                <div class="store-box">
                    <div class="store-icon"><img src="{store_icon}" alt="超商取貨"></div>
                    <div class="store-info">
                        <p class="store-name">{store_name}</p>
                        <p class="store-city">{store_city}</p>
                        <p class="store-road">{store_road}</p>
                        <p class="store-address">{store_address}</p>
                    </div>
                </div>
            </label>
        </div>
    </script>
@stop


@section('content')
    <div class="container clearfix">

        @if($cart)

            <div class="row">
                <section id="vue-app">


                    <form onsubmit="return orderStore();" method="POST" action="{{ url('order') }}" id="order-form" >

                        {{ csrf_field() }}
                        <input type="hidden" value="{{ $form_token }}" name="form_token">
                        <div class="split_line"></div>
                        <div class="form-card">
                            <div class="form-item clearfix">
                                <label class="form-item-label">收貨人</label>
                                <input class="form-item-input" placeholder="請填寫收貨人姓名或暱稱" name="name" type="text">
                            </div>
                            <div class="form-item clearfix">
                                <label class="form-item-label">收貨電話</label>
                                <input class="form-item-input" placeholder="如：0912345678" type="number"  pattern="[0-9]*" name="phone" >
                            </div>
                            <div class="form-item clearfix">
                                <label class="form-item-label">電子信箱</label>
                                <input class="form-item-input" placeholder="如：example@email.com" type="email" autocapitalize="on" name="email">
                            </div>
                        </div>

                        <div class="split_line"></div>

                        <div class="form-card">
                            <div class="form-item form-item-bala clearfix">
                                <label class="form-item-label">配送方式</label>
                                <div class="form-balance">
                                    @if(in_array(2,$delivery_type_all))
                                        <div class="balance-item">
                                            <input id="order_type_1" name="order_type" value="1" type="radio">
                                            <label for="order_type_1" data-id="1" @click="switchOrderType" class="balance-label">7-11超商（取貨付款）</label>
                                        </div>
                                    @endif
                                    @if(in_array(4,$delivery_type_all))
                                        <div class="balance-item">
                                            <input id="order_type_2" name="order_type" value="2" type="radio">
                                            <label for="order_type_2" data-id="2" @click="switchOrderType" class="balance-label">全家/OK/萊爾富（取貨付款）</label>
                                        </div>
                                    @elseif(in_array(3,$delivery_type_all))
                                        <div class="balance-item">
                                            <input id="order_type_2" name="order_type" value="2" type="radio">
                                            <label for="order_type_2" data-id="2" @click="switchOrderType" class="balance-label">全家超商（取貨付款）</label>
                                        </div>
                                    @endif
                                    @if(in_array(1,$delivery_type_all))
                                    <div class="balance-item">
                                        <input id="order_type_0" name="order_type" value="0" type="radio" >
                                        <label for="order_type_0" data-id="0" @click="switchOrderType" class="balance-label">宅配到府（貨到付款）</label>
                                    </div>
                                    @endif

                                </div>

                            </div>

                            <div class="form-item form-item-bala clearfix">
                                <label class="form-item-label">配送地區</label>
                                <div class="form-balance address-balance">
                                    <div class="balance-item select-city-box">
                                        {{--<select name="city" id="city">
                                            <option data-color="#ccc" class="grey-option" value="0">請選擇縣市</option>
                                        </select>--}}
                                        {{--<input type="text" name="city" @click="toShowCitySelect"   readonly>--}}
                                        <input @click="toShowCitySelect" placeholder="請選擇縣市" name="city" type="text" readonly class="form-item-input">

                                    </div>
                                    <div class="balance-item select-city-box">
                                        {{--<select name="county" id="county">
                                            <option data-color="#ccc" class="grey-option" value="0">請選擇地區</option>
                                        </select>--}}
                                        <input @click="toShowCountySelect" placeholder="請選擇地區" name="county" type="text" readonly class="form-item-input">
                                    </div>
                                    <div class="balance-item select-city-box">
                                        {{--<select  name="street" id="street">
                                            <option data-color="#ccc" class="grey-option" value="0">請選擇路段</option>
                                        </select>--}}
                                        <input @click="toShowStreetSelect" placeholder="請選擇路段" name="street" type="text" readonly class="form-item-input">

                                    </div>
                                </div>
                            </div>


                            <div class="form-item form-item-bala clearfix" id="store-row-main" style="display: none">
                                <label class="form-item-label">選擇門市</label>
                                <div class="form-balance store-balance">


                                    <div class="store-item-fe" id="casual" style="display: none">
                                        <div class="store-fi-row clearfix">
                                            <input type="radio" checked id="store-000" name="store_id2" >
                                            <label for="store-000">
                                                <div class="store-box">
                                                    <div class="store-icon"><img src="/static/img/711.jpg" alt="超商取貨"></div>
                                                    <div class="store-info">
                                                        <p class="store-name"></p>
                                                        <p class="store-city"></p>
                                                        <p class="store-road"></p>
                                                        <p class="store-address"></p>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="store-more">
                                            <a href="javascript:;">修改門市</a>
                                            <input style="display: none" class="temp_store_radio" type="radio" name="store_id" value="0">
                                        </div>
                                    </div>

                                    <div class="balance-item show-store-shop clearfix">


                                    </div>

                                </div>
                            </div>




                            {{--<div class="form-item">
                                <label class="form-item-label">配送地區</label>
                                <input class="form-item-input" placeholder="請選擇配送地區"  v-on:click="showAddress" id="address" :value="address" readonly name="city_area" type="text">
                            </div>--}}
                            <div class="form-item" id="address-row-main">
                                <label class="form-item-label">詳細地址</label>
                                <input class="form-item-input" placeholder="如：1巷1弄1號" type="text"  name="address">
                            </div>
                            <div class="form-item" id="time-row-main">
                                <label class="form-item-label">送達時段</label>
                                <input class="form-item-input" name="show_date" placeholder="請選擇送達時段" @click="toShowDateSelect"   readonly type="text">
                                <input class="form-item-input" name="delivery_time"  readonly type="hidden">

                            </div>
                        </div>

                        <div class="split_line"></div>

                        <div class="form-card">
                            <div class="goods">
                                <label class="form-item-label no-position">確認商品</label>
                                <div class="product">
                                    @php
                                        $total_price = 0;
                                    @endphp
                                    @if($cart)
                                        @foreach($cart as $item)
                                            <div class="item clearfix" id="cart-box">
                                                <div class="img-wrap"><img src="{{ asset_upload($item->img) }}" alt="{{ $item->name }}"></div>
                                                <div class="info">
                                                    <p class="title">{{ $item->name }}</p>
                                                    <p class="price">NT$ {{ round($item->price) }}</p>
                                                    <div class="number">
                                                        <i class="iconfont cart-l cart-action-reduce " data-id="{{ $item->id }}">&#xe60f;</i>
                                                        <input class="cart-input cart-action-num apex-cart-product-input" name="product[{{ $item->id }}]" data-cart-action="calc" data-unit-price="{{ $item->price }}" id="cart-input-{{ $item->id }}" value="{{ $item->cart_num }}" type="text" readonly>
                                                        <i class="iconfont cart-r cart-action-add" data-id="{{ $item->id }}">&#xe604;</i>
                                                    </div>
                                                    <a class="cart-action-remove2" data-id="{{ $item->id }}" data-action-callback="updateCartTotalSpan()" href="javascript:;"><p class="remove">移除</p></a>
                                                </div>
                                            </div>
                                            @php
                                                $total_price += $item->cart_num*$item->price;
                                            @endphp
                                        @endforeach
                                    @endif
                                </div>
                                <div class="statistic clearfix">
                                    <div class="statistic-main">
                                        <div class="row clearfix">
                                            <p class="p1">商品總額&nbsp;:&nbsp;</p>
                                            <p class="p2">NT$<span id="goods-price">{{ $total_price }}</span></p>
                                        </div>
                                        <div class="row clearfix" style="display: none" id="discount-text">
                                            <p class="p1">滿減優惠&nbsp;:&nbsp;</p>
                                            <p class="p2">-NT$<span id="discount-price"></span></p>
                                        </div>
                                        <div class="row clearfix">
                                            <p class="p1">運費&nbsp;:&nbsp;</p>
                                            <p class="p2">NT$<span id="freight-price">{{ $total_price>=$freight_where?0:$freight }}</span></p>
                                        </div>
                                        <div class="row clearfix">
                                            <p class="p1">訂單總額&nbsp;:&nbsp;</p>
                                            <p class="p2">NT$<span id="order-price">{{ $total_price>=$freight_where?$total_price:$total_price+$freight }}</span></p>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="split_line"></div>

                        <div class="form-card">
                            <div class="form-text-item-textarea">
                                <label class="form-item-label no-position">訂單備註</label>
                                <textarea class="form-item-textarea" placeholder="（選填）" name="remarks"></textarea>
                                <div class="place-description">
                                    <p>1. 您可以在訂單備註留下您的特殊要求，如：需要延遲發貨時間，或到貨時間，我們將盡力按照您的要求來處理訂單。</p>
                                    <p>2. 訂單生成後將無法自行修改，請聯絡本站客服為您修改。</p>
                                    <p>3. 請您再次確認您的訂單資訊，核實後點擊提交訂單。</p>
                                </div>
                            </div>

                        </div>




                    </form>
                    <van-popup
                        v-model="show"
                        position="bottom"
                        @close="close"
                        :style="{ height: '45%' }"
                    >
                        <van-picker
                            show-toolbar
                            title="請選擇地區"
                            confirm-button-text="確認"
                            cancel-button-text="取消"
                            visible-item-count="7"
                            :columns="addressList"
                            :loading="isLoading"
                            @confirm="confirm"
                            @cancel="close"
                            @change="onChange"

                        />
                    </van-popup>

                    <van-popup v-model="showDate" position="bottom" :style="{ height: '35%' }">
                        <van-picker
                            title="請選擇送達時段"
                            show-toolbar
                            :columns="dateColumns"
                            @confirm="onShowDateConfirm"
                            @cancel="onShowDateCancel"
                            confirm-button-text="確認"
                        />
                    </van-popup>

                    <van-popup v-model="showCity" position="bottom" :style="{ height: '48%' }">
                        <van-picker
                            title="請選擇縣市"
                            show-toolbar
                            :columns="cityColumns"
                            visible-item-count="7"
                            @confirm="onShowCityConfirm"
                            @cancel="onShowCityCancel"
                            confirm-button-text="確認"
                            :loading="isCityLoading"
                        />
                    </van-popup>
                    <van-popup v-model="showCounty" position="bottom" :style="{ height: '48%' }">
                        <van-picker
                            title="請選擇地區"
                            show-toolbar
                            :columns="countyColumns"
                            visible-item-count="7"
                            @confirm="onShowCountyConfirm"
                            @cancel="onShowCountyCancel"
                            confirm-button-text="確認"
                            :loading="isCountyLoading"
                        />
                    </van-popup>

                    <van-popup v-model="showStreet" position="bottom" :style="{ height: '48%' }">
                        <van-picker
                            title="請選擇路段"
                            show-toolbar
                            :columns="streetColumns"
                            visible-item-count="7"
                            @confirm="onShowStreetConfirm"
                            @cancel="onShowStreetCancel"
                            confirm-button-text="確認"
                            :loading="isStreetLoading"
                        />
                    </van-popup>

                </section>
            </div>

        @else
            <div class="not-goods">
                <p>購物袋空空如也</p>
                <p>快去加入商品吧</p>
            </div>

        @endif
    </div>
    <div class="footer-fuqi" style="height: 1.28rem;width: 100%"></div>
    <footer class="fixed-footer">
        <div class="fixed-footer-center">
            @if($cart)
                <p class="total_price">訂單總額：NT$ <span id="order_total_price">{{ $total_price>$freight_where?$total_price:$total_price+$freight }}</span></p>
                <a class="go-shop-btn form-btn" href="javascript:;" onclick="$('#order-form').submit()" data-observer="提交訂單">提交訂單</a>
            @else
                <p class="total_price">訂單總額：NT$ <span id="order_total_price">0</span></p>
                <a class="go-shop-btn form-btn" href="/" >返回首頁</a>
            @endif
        </div>
    </footer>
@endsection




